	<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>系统管理</el-breadcrumb-item>
			<el-breadcrumb-item>员工管理</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片视图 -->
		<el-card>
			<!-- 表单 -->
			<el-form  :inline="true" v-bind:model="formInline" class="demo-form-inline">
				<el-form-item label="姓名">
					<el-input v-model="formInline.LoginName" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="formInline.Islockout" placeholder="状态">
						<el-option label="--请选择--" value=""></el-option>
						<el-option label="锁定" value="1"></el-option>
						<el-option label="正常" value="0"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" round>搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="dialogAddFormVisible=true" round>添加用户</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格 -->
			<el-table :data="tableData" border stripe style="width: 100%">
				<el-table-column prop="Id" label="编号">
				</el-table-column>
				<el-table-column prop="LoginName" label="登录名">
				</el-table-column>
				<el-table-column prop="ProtectEMail" label="邮箱">
				</el-table-column>
				<el-table-column prop="protectMTel" label="手机号">
				</el-table-column>
				<el-table-column prop="CreateTime" label="创建时间">
				</el-table-column>
				<el-table-column prop="Islockout" label="是否锁定">
					<template v-slot="scope">
						<el-tooltip content="绿:未锁定 红:锁定" placement="top">
							<el-switch v-model="scope.row.Islockout" active-color="#13ce66" inactive-color="#ff4949"
								@change="changeStatus(scope.row)" :active-value="0" :inactive-value="1"></el-switch>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="LookTime" label="锁定时间">
				</el-table-column>
				<el-table-column label="操作" width="400px">
					<template slot-scope="scope">
						<el-button icon="el-icon-setting" size="mini" type="primary" @click="setRole(scope.row.Id)">角色
						</el-button>
						<el-button icon="el-icon-edit" size="mini" type="success" @click="editUser(scope.row)">修改
						</el-button>
						<el-button icon="el-icon-delete" size="mini" type="warning" @click="delUser(scope.row.Id)">删除
						</el-button>
						 <el-button icon="el-icon-refresh" size="mini" type="danger" @click="resetUser(scope.row.Id)">重置</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
				:page-sizes="[10, 15, 20, 25]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
				:total="count">
			</el-pagination>
		</el-card>
		<!-- 添加 -->
		<el-dialog @close="addDialogClosed" title="添加员工" :visible.sync="dialogAddFormVisible">
			<el-form :model="addform" ref="addFormRef" :rules="addFormRefRules">
				<el-form-item label="登录名" prop="LoginName" :label-width="formLabelWidth">
					<el-input v-model="addform.LoginName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="Password" :label-width="formLabelWidth">
					<el-input v-model="addform.Password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="ProtectEMail" :label-width="formLabelWidth">
					<el-input v-model="addform.ProtectEMail" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="电话" prop="protectMTel" :label-width="formLabelWidth">
					<el-input v-model="addform.protectMTel" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogAddFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog title="修改员工信息" :visible.sync="dialogEditFormVisible">
			<el-form :model="editform" ref="editFormRef">
				<el-form-item  label="登录名" prop="LoginName" :label-width="formLabelWidth">
					<el-input disabled v-model="editform.LoginName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="ProtectEMail" :label-width="formLabelWidth">
					<el-input v-model="editform.ProtectEMail" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="protectMTel" :label-width="formLabelWidth">
					<el-input v-model="editform.protectMTel" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="Islockout" :label-width="formLabelWidth">
					<el-select v-model="editform.Islockout" placeholder="请选择活动区域">
						<el-option label="--请选择--" value=""></el-option>
						<el-option label="锁定" value="1"></el-option>
						<el-option label="正常" value="0"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialogClosed">取 消</el-button>
				<el-button type="primary" @click="editUserInfo">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 角色设置弹框 -->
		<el-dialog title="你正在设置[xxx]的角色" :visible.sync="dialogRolesFormVisible">
			<div>
				<el-transfer v-model="value" :data="datas" :titles="['系统所有角色', '当前所有角色']" @change="handleChange">
				</el-transfer>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			// 验证邮箱的规则
			var checkEmail = (rule, value, cb) => {
				//验证邮箱的正则表达式
				const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (regEmail.test(value)) {
					// 合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			// 验证手机号的规则
			var checkMobile = (rule, value, cb) => {
				// 验证手机号的正则表达式
				const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (regMobile.test(value)) {
					// 合法的邮箱
					return cb()
				}
				cb(new Error('请输入合法的手机号'))
			}
			return {
				formInline: {
					LoginName: '',
					Islockout: ''
				},
				addFormRefRules:{
					// 验证用户名是否合法
					LoginName: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					// 验证密码是否合法
					Password: [{
							required: true,
							message: '请设置密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 15,
							message: '长度在 6 到 15 个字符',
							trigger: 'blur'
						}
					],
					//邮箱
					ProtectEMail:[{
							required: true,
							message: '请填写密保邮箱',
							trigger: 'blur'
						},{
						validator: checkEmail,
						trigger: 'blur'
					}
						],
					//电话
					protectMTel:[{
							required: true,
							message: '请密保手机号',
							trigger: 'blur'
						},
						{
							validator: checkMobile,
							trigger: 'blur'
						}
						]
				},
				//穿梭框数据
				datas: {},
				value: [],
				userId: '',

				tableData: [],
				page: 1,
				limit: 10,
				count: 0,
				dialogAddFormVisible: false,
				dialogEditFormVisible: false,
				dialogResetFormVisible: false,
				dialogRolesFormVisible: false,
				formLabelWidth: "120px",
				addform: {},
				editform: {},
				resetform: {}
			}
		},
		created() {
			this.getTableList();
		},
		methods: {
			//展开穿梭框
			async setRole(Id) {
				console.log(Id)
				//this.setRoleDialogVisible = true
				//在展示对话框之前，获取所有角色的列表
				const {
					data: res
				} = await this.$http.get('api/Users/GetRoles?Id=' + Id)
				console.log(res)
				if (res.code !== 0) {
					this.datas = res.data
					this.value = res.valus
					this.userId = res.userId
					this.dialogRolesFormVisible = true
					return this.$message.success('该用户没有角色 请添加!')

				}
				this.datas = res.data
				this.value = res.valus
				this.userId = res.userId
				this.dialogRolesFormVisible = true
			},
			//穿梭框数据处理
			handleChange(value, direction, movedKeys) {
				//console.log(value, direction, movedKeys);
				console.log(value);
				console.log(direction);
				console.log(movedKeys);
				//const roleId=value[0];
				var movedKey = "";
				for (let i = 0; i < movedKeys.length; i++) {
					movedKey = movedKey + movedKeys[i] + ","
				}
				movedKey = movedKey.substring(0, movedKey.length - 1)
				console.log(movedKey);
				console.log(movedKeys.length);
				if (direction == "right") {
					this.$http.get('api/Users/GetUsersRolesAdd?userId=' + this.userId + "&movedKey=" + movedKey)
						.then(function(res) {
							console.log(res)
							if (res.data.code == 0) {
								alert("分配角色成功")
								this.$message.success('分配角色成功!')
							}
						})
				}
				if (direction == "left") {
					this.$http.get('api/Users/GetUsersRolesDel?userId=' + this.userId + "&movedKey=" + movedKey)
						.then(function(res) {
							console.log(res)
							if (res.data.code == 0) {
								alert("分配角色移除成功")
								this.$message.success('分配角色成功!')
							}
						})
				}
			},
			onSubmit() {
				this.getTableList()
			},
			handleSizeChange(val) {
				this.limit = val;
				this.getTableList()
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getTableList()
			},
			// 数据表格
			async getTableList() {
				const {
					data: res
				} = await this.$http.get('api/Users/users', {
					params: {
						page: this.page,
						limit: this.limit,
						LoginName: this.formInline.LoginName,
						Islockout: this.formInline.Islockout
					}
				})
				this.count = res.count;
				this.tableData = res.data;
			},
			//添加处理
			addUser() {
				this.$refs.addFormRef.validate(async valid => {
					if (!valid) return
					const {
						data: res
					} = await this.$http.post('api/Users/addUsers', this.addform)
					if (res.code == -1) {
						this.$message.error(res.msg)
					}
					this.$message.success(res.msg);
					this.dialogAddFormVisible = false;
					this.getTableList();
					//console.log(res.data);
				})
			},
			//关闭添加弹框处理
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			//删除员工
			async delUser(Id) {
				const confirmResult = await this.$confirm('此操作将永久删除该员工,是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => {
					return err
				})
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消删除！')
				}
				const {
					data: res
				} = await this.$http.post('api/Users/DelUser', {
					Id,
					userId: parseInt(window.sessionStorage.getItem("token"))
				})
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				this.getTableList()
			},
			//编辑员工
			editUser(row) {
				this.editform = row
				this.dialogEditFormVisible = true
			},
			//编辑提交事件：
			async editUserInfo() {
				if (this.editform == null) return
				const {
					data: res
				} = await this.$http.post('api/Users/editUser', this.editform)
				if (res.code !== 0) {
					return this.$message.error("编辑失败！");
				}
				this.dialogEditFormVisible = false
				this.getTableList();
				this.$message.success("编辑成功！");
			},
			//编辑弹框关闭监听事件
			editDialogClosed() {
				//this.$refs.editFormRef.resetFields()
				this.editform = {}
				this.getTableList()
				this.dialogEditFormVisible = false
			},
			//重置
			async resetUser(Id) {
				const confirmResult = await this.$confirm('此操作将初始化密码为123456,是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => {
					return err
				})
				if (confirmResult !== 'confirm') {
					return this.$message.info('已取消重置操作！')
				}
				const {
					data: res
				} = await this.$http.post('api/Users/resetUser', {
					Id
				})
				if (res.code !== 0) {
					return this.$message.error(res.msg)
				}
				this.$message.success(res.msg)
				this.getTableList()
			},
			
			//状态
			async changeStatus(row) {
				this.switchrow = row;
				const {
					data: res
				} = await this.$http.post('api/Users/Idlockout', this.switchrow);
				console.log(res)
				if (res.code !== 0) {
					this.$message.error(res.msg);
				}
				this.$message.success(res.msg);
				this.getTableList();
			}

		}
	}
</script>

<style lang="less" scoped="scoped">

</style>
